<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="table-container" :class="tableClass">
    <table>
      <tr  v-for="(row, rowIndex) in this.tableRows" :key="rowIndex">
        <td  v-for="(cell, cellIndex) in row" :rowspan="cell.rowSpan" :colspan="cell.colSpan">
          <avue-form :option="cell.option" v-model="myformData"></avue-form>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>

  // import custom from '@/framework-core/components/custom/index';
  // import { ref, reactive, readonly, toRefs, computed, watch ,provide,inject} from "vue";
  export default {
    // setup() {
    //   const viewFormData = inject('gViewFormData');//注入name属性
    //   return{
    //     viewFormData,
    //   }
    // },
    emits: ['update:modelValue', 'click', 'focus', 'blur', 'change'],
    props: {
      column: Object
    },
     inject: ['getViewFormData','gViewFormData'],
    data() {
      return {
        tableClass:"",
        text: undefined,
        isMobileTemp: window.isMobile ||window.innerWidth<800,
        tableRows: [],
        myformData:{},
        formData:{},
      };
    },
    watch: {
      formData: {
        handler(val) {
          if(this.getViewFormData){
            this.formData = this.getViewFormData();
            this.convertFormData();
          }
        },
        immediate: true,
        deep: true
      },
      myformData: {
        handler(val) {

          if (this.column.children) {
            for (var dindex = 0; dindex < this.column.children.length; dindex++) {
              var trow = this.column.children[dindex];
              var prop = trow.prop;
             this.formData[prop]  = this.myformData[prop];
            }
          }

          // if(this.getViewFormData){
          //  // this.formData = this.getViewFormData();
          //   this.convertFormData();
          // }
          // this.column.callback(val);
          // this.handleChange(val)
          // this.handleTextValue && this.handleTextValue(val)
        },
        immediate: false,
        deep: true
      },
    },
    created() {
      // alert("text:"+JSON.stringify(  this.text))
      // alert("modelValue:"+JSON.stringify(  this.modelValue))
      this.tableClass ="table-d-"+ this.column.prop;
      debugger
      if(this.column.children) {
        for (var dindex = 0; dindex < this.column.children.length; dindex++) {
          var trow = this.column.children[dindex];
          var rowIndex =this.isMobileTemp?(trow.rowIndexPhone ? trow.rowIndexPhone - 1 : 0): (trow.rowIndex ? trow.rowIndex - 1 : 0);
          var colIndex = this.isMobileTemp? (trow.colIndexPhone ? trow.colIndexPhone - 1 : 0):(trow.colIndex ? trow.colIndex - 1 : 0);

          var rcols = this.tableRows[rowIndex];
          var tempRow = this.deepClone(trow);

          var rowSpan =this.isMobileTemp?tempRow.rowSpanPhone:tempRow.rowSpan;
          var colSpan = this.isMobileTemp?tempRow.colSpanPhone:tempRow.colSpan;

          //tempRow.span = 24;
          var option = {};
          option.border = true;
          option.header = false;
          option.menu = false;
          option.size = this.size;
          option.disabled = tempRow.disabled;
          option.readonly = tempRow.readonly;
          option.menuBtn = false;

          option.rowSpan = rowSpan || 1;
          option.colSpan =  colSpan || 1;
          option.option = {};
          option.option.submitBtn = false;
          option.option.emptyBtn = false;
          option.option.column = [];
          option.option.column.push(tempRow);
          if (rcols == undefined) {
            rcols = [];
            rcols.splice(colIndex, 0, option);
            this.tableRows.splice(rowIndex, 0, rcols);
          } else {
            rcols.splice(colIndex, 0, option);
          }

        }
      }
    },

    methods: {
      convertFormData() {
        if (!this.formData) {
          this.formData = {};
        }
        if (this.column.children) {
          for (var dindex = 0; dindex < this.column.children.length; dindex++) {
            var trow = this.column.children[dindex];
            var prop = trow.prop;
            this.myformData[prop] = this.formData[prop];
          }
        }
        //alert("myformData:"+JSON.stringify(   this.myformData))
      }
    }
  };
</script>

<style scoped>

  .table-container table {
    border-collapse: collapse; /* 合并相邻的边框 */
    width: 100%; /* 表格宽度设置为100% */

  }

  .table-container table,th,td {
    border: 1px solid black; /* 设置边框 */
    padding: 8px; /* 设置填充 */
  }

  @media screen and (max-width: 760px) {

    .table-container table{
      width: 100% !important;
      table-layout: fixed;
    }

    .table-container table,th,td {
      border: 1px solid black; /* 设置边框 */
      padding: 0px !important; /* 设置填充 */
    }



    .table-container .van-cell  {
      display: inline-block !important;
    }




    .table-container .el-form-item .el-form-item{
      padding: 2px 10px !important;
    }

  }
</style>
